import { Component, ElementRef, OnInit, Input, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-scroll-left',
  templateUrl: './scroll-left.component.html',
  styleUrls: ['./scroll-left.component.less'],
  encapsulation: ViewEncapsulation.Emulated,
})
export class ScrollLeftComponent implements OnInit {


  constructor() { }

  ngOnInit(): void {
  }

  // @ViewChild('scallBox', { static: false }) scallBox: ElementRef;
  // @ViewChild('myUlList01', { static: false }) myUlList01: ElementRef;
  // @ViewChild('myUlList02', { static: false }) myUlList02: ElementRef;

  // @Input()
  // public dataItem: any = {
  //   time: 150,
  //   minLength: 1,
  //   topStyle: { height: '400px' , width: '500px'},
  //   scrollList: ['1','2','3','4']
  // }

  // ngAfterViewInit() {
  //   // setTimeout(()=>{this.roll(this.dataItem.time)},1000)
  // }
  // timer = null
  // ngOnDestroy() {
  //   if (this.timer) clearInterval(this.timer);
  // }
  // roll(t) {
  //   var upBox = this.scallBox.nativeElement
  //   var ul1 = this.myUlList01.nativeElement
  //   var ul2 = this.myUlList02.nativeElement
  //   if (this.dataItem.scrollList.length < this.dataItem.minLength) { return console.log('不需要滚动') }
  //   ul2.innerHTML = ul1.innerHTML;
  //   upBox.scrollLeft = 0;
  //   this.rollStart(t);
  // }
  // rollStart(t) {
  //   // console.log('开始')
  //   var upBox = this.scallBox.nativeElement
  //   var ul1 = this.myUlList01.nativeElement
  //   this.rollStop('开始');
  //   this.timer = setInterval(() => {
  //     // 当滚动高度大于列表内容高度时恢复为0  
  //     upBox.scrollLeft++;
  //     if (ul1.scrollWidth - upBox.scrollLeft === 1) {
  //       upBox.scrollLeft = 0;
  //       upBox.scrollLeft++;
  //     }
  //     if (upBox.scrollLeft >= ul1.scrollWidth) {
  //       upBox.scrollLeft = 0;
  //       upBox.scrollLeft++;
  //     }
  //   }, t);

  //   console.log(this.timer)
  // }
  // rollStop(e) {
  //   clearInterval(this.timer);
  //   console.log(this.timer)
  // }


  
  @Input()
  public dataObj: any = {
    time: 50,
    minLength: 1,
    width:200,
    height: 200,
    unit: 'px',
    scrollList: ['1111','2222','3333','444','555','666']
  }
  
  @ViewChild('outerMost', { static: false }) outerMost: ElementRef;
  @ViewChild('outerBox1', { static: false }) outerBox1: ElementRef;
  @ViewChild('outerBox2', { static: false }) outerBox2: ElementRef;

  ngAfterViewInit() {
    setTimeout(()=>{this.roll(this.dataObj.time)},1000)
  }
  timer = null
  ngOnDestroy() {
    if (this.timer) clearInterval(this.timer);
  }
  roll(t) {
    var outerMost = this.outerMost.nativeElement
    if (this.dataObj.scrollList.length < this.dataObj.minLength) { return console.log('不需要滚动') }
    outerMost.scrollLeft = 0;
    this.rollStart(t);
  }
  rollStart(t) {
    var outerMost = this.outerMost.nativeElement
    var outerBox1 = this.outerBox1.nativeElement
    this.rollStop('开始');
    this.timer = setInterval(() => {
      // 当滚动高度大于列表内容高度时恢复为0  
      outerMost.scrollLeft++;
      if (outerBox1.scrollWidth - outerMost.scrollLeft === 1) {
        outerMost.scrollLeft = 0;
        outerMost.scrollLeft++;
      }
      if (outerMost.scrollLeft >= outerBox1.scrollWidth) {
        outerMost.scrollLeft = 0;
        outerMost.scrollLeft++;
      }
    }, t);
  }
  rollStop(e) {
    console.log(e)
    clearInterval(this.timer);
  }

}

